<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评论页面</title>
</head>
<style>
    .comment{
        width: 1000px;
        height: 1000px;
        margin: 0 auto;
        /*background: #e84c13;*/
        /*弹性盒子布局*/
        display: flex;
    }
    /*左侧区域划分*/
    .left{
        width: 400px;
        height: 600px;
        /*background: black;*/
    }
    /*右侧区域划分*/
    .right{
        width: 600px;
        height: 1000px;
        /*background: blueviolet;*/
    }

    /*左侧上区域*/
    .pic{
        width: 300px;
        height: 300px;
        margin: 50px;
        /*background: deeppink;*/
    }
    .pic img{
        width: 300px;
        height: 300px;
    }
    /*左侧下区域*/
    .msg{
        width: 300px;
        height: 200px;
        margin: 50px;
        /*background: #e84c13;*/
    }
    .msg_top{
        width: 300px;
        height: 80px;
        /*background: #33b312;*/
        display: flex;
    }
    .msg_middle{
        width: 300px;
        height: 50px;
        /*background: deeppink;*/
    }
    .msg_bottom{
        width: 300px;
        height: 70px;
        /*background: blue;*/
    }
    .msg_top p{
        font-size: 25px;
        margin-left: 20px;

    }
    .msg_top img{
        width: 50px;
        height: 50px;
        margin-left: 50px;
    }
    .msg_middle span{
        font-size: 20px;
        color: #666;
        margin-left: 20px;
    }
    .msg_bottom span{
        font-size: 20px;
        color: #666;
        margin-left: 20px;
        line-height: 50px;
    }

    /*设置右侧的评论*/
    .right span{
        font-size: 30px;
        font-weight: 600;
        color: #333;
    }
    /*左侧用户头像*/
    .upic{
        width: 60px;
        height: 60px;
        margin-left: 10px;
    }
    .upic img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    /*用户昵称*/
    .nickName span{
        font-size: 14px;
        line-height: 22px;
        color: #333;
    }

    .left_comment{
        margin-left: 20px;
    }
    /*评论信息*/
    .hot_comment span{
        font-size: 12px;
        line-height: 20px;
        color: #6a6149;
    }
    /*时间*/
    .time span{
        font-size: 14px;
        opacity: 0.5;
        line-height: 17px;
    }
</style>
<script src="js/jquery-1.7.2.js"></script>
<script>
    //页面一加载就会执行的代码
    window.onload = function (){
        //http://localhost:8080/comment?rid=228908 可以按照? 或者 = 来进行切割   location.href
        //var url = "http://localhost:8080/comment?rid=228908";
        var url = location.href;
        //按照 = 来进行切割
        var rid = url.split("=")[1];
        //往后台发送异步请求获取最新评论和热门评论
        $.post("/normalComment",{"rid":rid},function (result){
            //result就是最新评论
            // console.log(result)
            for(var i = 0;i<result.length;i++){
                var newComment = "<div class=\"upic\">\n" +
                    "                    <img src=\""+result[i].u_pic+"\">\n" +
                    "                </div>\n" +
                    "                <div class=\"nickName\">\n" +
                    "                    <span>"+result[i].u_name+"</span>\n" +
                    "                </div>\n" +
                    "                <div class=\"hot_comment\">\n" +
                    "                    <span>"+result[i].msg+"</span>\n" +
                    "                </div>\n" +
                    "                <div class=\"time\">\n" +
                    "                    <span>"+result[i].time+"</span>\n" +
                    "                </div>";
                //将最新评论追加到newCOmment中
                $(".newComment").append(newComment);
            }
        })
        $.post("/hotComment",{"rid":rid},function (result){
            // result就是热门评论
            for(var i =0;i<result.length;i++){
                var hotComment = "<div class=\"upic\">\n" +
                    "                    <img src=\""+result[i].u_pic+"\">\n" +
                    "                </div>\n" +
                    "                <div class=\"nickName\">\n" +
                    "                    <span>"+result[i].u_name+"</span>\n" +
                    "                </div>\n" +
                    "                <div class=\"hot_comment\">\n" +
                    "                    <span>"+result[i].msg+"</span>\n" +
                    "                </div>\n" +
                    "                <div class=\"time\">\n" +
                    "                    <span>"+result[i].time+"</span>\n" +
                    "                </div>";
                //将热门评论追加到hotComment中
                $(".hotComment").append(hotComment);
            }
        })

        //加载歌曲的详细信息
        $.post("/musicInfo",{"rid":rid},function (result){
            // 回调函数result就是我们歌曲的详细信息
            // console.log(result)
            var leftContent = "<div class=\"pic\">\n" +
                "                <img src=\""+result.pic+"\">\n" +
                "            </div>\n" +
                "            <div class=\"msg\">\n" +
                "                <div class=\"msg_top\">\n" +
                "                    <p>"+result.songName+"</p>\n" +
                "                    <img onclick='toMv("+result.rid+")' src=\"img/MV.png\">\n" +
                "                </div>\n" +
                "                <div class=\"msg_middle\">\n" +
                "                    <span>"+result.artist+"</span>\n" +
                "                </div>\n" +
                "                <div class=\"msg_bottom\">\n" +
                "                    <span>专辑: "+result.album+"</span>\n" +
                "                </div>\n" +
                "            </div>";
            //将歌曲的详细信息追加到左侧的评论区域
            $(".left").append(leftContent);
        })
    }
    //跳转到mv页面
    function toMv(rid){
        console.log(rid)
        location.href = "http://localhost:8080/mv?rid="+rid;
    }

</script>


<body>

    <div class="comment">
        <!--左侧区域-->
        <div class="left">

        </div>


        <!--右侧区域-->
        <div class="right">
            <SPAN>热门评论</SPAN>
            <!--热评-->
            <div class="hotComment">

            </div>
            <SPAN>最新评论</SPAN>
            <!--最新评论-->
            <div class="newComment">

            </div>
        </div>
    </div>

</body>
</html>